<template>
  <div>
    <el-button type="warning" @click="allClick">全自动生成</el-button>
    <el-button type="warning" @click="yuanshiClick">原始数据生成</el-button>
    <el-button @click="titleClick">title生成</el-button>
    <el-button type="primary" @click="tabClick">tab生成</el-button>
    <el-button type="success" @click="tableClick">table生成</el-button>
    <el-button type="info" @click="dialogClick">dialog生成</el-button>
    <el-button type="danger" @click="endClick">结束</el-button>
    <el-button type="danger" @click="endClick2">清空数据</el-button>
    <el-input
        type="textarea"
        autosize
        placeholder="生成的代码"
        v-model="textarea">
    </el-input>
  </div>
</template>

<script>
export default {
  components: {},
  props: [],
  data() {
    return {
      //原始初始数据
      componentType: {
        title: true,//CommonTitle 组件是否显示
        tabs: true,//CommonTabs 组件是否显示
        table: true,//CommonTable 组件是否显示
        dialog: false,//CommonDialog 组件是否显示
      },
      yuanshiData: '',

      //title 配置数据
      titleProp: {
        name: '报废提醒',//title name
        isAddBut:false,//是否有新增按钮
        addBUtName: '新增报废类型',//新增按钮名称
      },

      //tab 配置数据
      tabsProp: {
        active: '',//默认打开状态
        tabsSwitchField: 'status',//切换状态字段
        //lable 切换名称 name 状态
        tabsTitleProp: [
          {label: '全部', name: ''},
          // {label: '分类租金押金设置', name: '1'},
          // {label: '历史修改记录', name: '2'},
          // {label: '已完成', name: '3'},
        ],
      },
      //table 配置数据
      tableProp: {
        statusName: 'status',//状态字段名 已启动未启动等状态按钮显示还是隐藏
        expand:false,//是否有箭头点击
        componentName:'financialManagement4Child',//expand 组件名称
        //type 1:正常  2:图片 3:时间
        tableListProp: [
          {title: '钢瓶类型', field: 'a1', type: 1},
          {title: '数量', field: 'a2', type: 1},
          {title: '生产年月', field: 'a3', type: 3},
          {title: '报废年限', field: 'a4', type: 1},
          {title: '所属地区', field: 'a5', type: 1},
          {title: '报废日期', field: 'a6', type: 3},
          // {title: '操作', field: '', type: 4},
        ],
        //操作按钮配置 name:按钮名称 type 1:编辑按钮 2:删除按钮 3:其他按钮
        operate: [
          // {name: "回收信息", type: 1},
          // {name: "直接打印", type: 3},
          // {name: "编辑", type: 1},
          // {name: "周转数", type: 3},
          // {name: "删除", type: 2},
        ],
        //table 数据
        tableData: []
      },

      //dialog 配置数据
      dialogProp: {
        //表单配置
        // 字段配置 title 名称  field 字段 type 1:正常 2:上传图片 3:下拉框 4:单选框 5:多选框 6:时间
        formListProp: [
          {title: '报废类型名称', field: 'a1', type: 1},
        ]
      },
      textarea: '',//生产的代码

      startScript: '<scr' + 'ipt>',
      endScript: '</scr' + 'ipt>',
      styel: '<style lang="scss" scoped></style>'
    };
  },
  mounted() {
  },
  methods: {
    // 原始数据生成
    yuanshiClick() {
      this.textarea = `
      <template>
            <div><business-table :businessTableData="businessTableData" ref="businessTable" /></div>
      </template>
    ${this.startScript}
     export default {
     components: {},
      props: [],
      data() {
      return {
      initDialogData: null,//存储dialog原始数据，初始化要用
      businessTableData: {
        //需要显示组件
        componentType: {
          title: ${this.componentType.title},//CommonTitle 组件是否显示
          tabs: ${this.componentType.tabs},//CommonTabs 组件是否显示
          table: ${this.componentType.table},//CommonTable 组件是否显示
          dialog: ${this.componentType.dialog},//CommonDialog 组件是否显示
        },
        //组件需要的接口和初始化方法名
        interfaceName: {
          init: '',//初始化接口名称
          initMethodName: 'initData',//初始化方法名 默认初始化名称
          add: '',//新增接口名称
          edit: '',//修改接口名称
          del: '',//删除接口
          status: '',//修改状态名称
          oneData: '',//读取一条接口名称
        },
      `;
    },
    //生成title
    titleClick() {
      if(this.titleProp.isAddBut){
        this.textarea += `
      //CommonTitle组件数据
      titleProp: {
          name: '${this.titleProp.name}',//标题名称
          class: '',//class名称
          operate: [{ //按钮集合
            show: true,//是否显示
            name: '${this.titleProp.addBUtName}',//按钮名称
            type: 'primary',//按钮颜色 primary success info warning danger text
            icon: 'el-icon-plus', //图标
            plain: false,// 是否朴素按钮 false 否 true 是
            round: false, // 是否圆角 false 否 true 是
            method: 'addTitleClick', //按钮方法  业务组件方法名固定
            id: 20000,//权限 20000 默认显示
          }]
        },
      `
      }else{
        this.textarea += `
      //CommonTitle组件数据
      titleProp: {
          name: '${this.titleProp.name}',//标题名称
          class: '',//class名称
          operate: []
        },
      `
      }

    },
    //生成tab
    tabClick() {
      //tabs 标题
      let tabsTitleProp = [];
      for (let i = 0; i < this.tabsProp.tabsTitleProp.length; i++) {
        let tabTitleJSon = `
          {
            show: true,
            label: '${this.tabsProp.tabsTitleProp[i].label}', //名称
            name: '${this.tabsProp.tabsTitleProp[i].name}',//状态 全部是20000
            total: 0, //总数
          }`
        tabsTitleProp.push(tabTitleJSon)
      }
      this.textarea += `
        //CommonTabs组件数据
        tabsProp: {
          active: '${this.tabsProp.active}',//默认打开是什么状态 如未审核，已审核，全部的话是20000
          class: '',//class名称
          keywords: '',//搜索的值
          stretch: false,//标签的宽度是否自撑开 是 true 否 false
          tabsClick: 'tabsClick', //点击tabs方法名
          searchClick: 'tabsClick',// 搜索方法名 业务组件方法名固定
          heightSearchClick: 'tabsClick',//高级搜索点击确定 业务组件方法名固定
          inputShow: false,//搜索框是否显示 true 是 false 否
          heightShow: false,//是否有高级搜索 true 是 false 否
          heightSelectShow: false,//高级搜索是否默认下拉出来 true 是 false 否
          tabsSwitchField: '${this.tabsProp.tabsSwitchField}',//切换状态字段
          //tabs 标题
          tabsTitleProp: [${tabsTitleProp}],
          //高级搜索字段
          heightSearchProp: [],
          //高级搜索的值
          heightSearchData: {}
        },

      `
    },
    //生成table
    tableClick() {
      let tableData = []; //字段配置
      let tableDataJson = `id:'',
      `;//生成tableData
      let tableListProp = []; //table 数据生成
      for (let i = 0; i < this.tableProp.tableListProp.length; i++) {
        let tableListJson = null;
        switch (this.tableProp.tableListProp[i].type) {
          case 1:
            tableListJson = `
            {
              show: true,//是否显示 true 显示 false 不显示
              title: '${this.tableProp.tableListProp[i].title}',//表头
              field: '${this.tableProp.tableListProp[i].field}',//字段
              isWidth: false,//是否是固定长度 true 是 false 否
              width: '120',//长度
              headerAlign: 'center',//表头居中
              align: 'center',//内容居中
              tooltip: true,//是否超长tip
              class: '',//表格class
              type: 'chineseCharacters',
            }`
            tableDataJson += `${this.tableProp.tableListProp[i].field}:'${this.tableProp.tableListProp[i].title}',//${this.tableProp.tableListProp[i].title}
            `
            break
          case 2:
            tableListJson = `
            {
              show: true,//是否显示 true 显示 false 不显示
              title: '${this.tableProp.tableListProp[i].title}',//表头
              field: '${this.tableProp.tableListProp[i].field}',//字段
              isWidth: false,//是否是固定长度 true 是 false 否
              width: '120',//长度
              headerAlign: 'center',//表头居中
              align: 'center',//内容居中
              tooltip: false,//是否超长tip
              class: '',//表格class
              type: 'images',
              urlType: 'pc_url',//使用那种格式的图片 mobile_url:手机图片 pc_url:pc图片 url:原生大小
              jsonName: '',//是json里面的字段
              imageWidth: '60',//图片长度
              imageHeight: '',//图片高度
            }`
            tableDataJson += `${this.tableProp.tableListProp[i].field}:JSON.stringify([]),//${this.tableProp.tableListProp[i].title}
            `
            break
          case 3:
            tableListJson = `
            {
              show: true,//是否显示 true 显示 false 不显示
              title: '${this.tableProp.tableListProp[i].title}',//表头
              field: '${this.tableProp.tableListProp[i].field}',//字段
              isWidth: false,//是否是固定长度 true 是 false 否
              width: '120',//长度
              headerAlign: 'center',//表头居中
              align: 'center',//内容居中
              tooltip: true,//是否超长tip
              class: '',//表格class
              type: 'timeStamp',
              jsonName: '',//是json里面的字段
              timeType: true,//显示时间是否到时分秒 true 是 false 没有时分秒就一个日期
            }`
            tableDataJson += `${this.tableProp.tableListProp[i].field}:'${this.tableProp.tableListProp[i].title}',//${this.tableProp.tableListProp[i].title}
            `
            break
          case 4:
            tableListJson = `
            {
              show: true,//是否显示 true 显示 false 不显示
              title: '${this.tableProp.tableListProp[i].title}',//表头
              headerAlign: 'center',//表头居中
              align: 'center',//内容居中
              isWidth: true,//是否是固定长度 true 是 false 否
              width: '180',//长度
              tooltip: false,//是否超长tip
              class: '',//表格class
              type: 'operation',
            }`
            break
        }
        tableListProp.push(tableListJson);
      }
      tableDataJson = `
      {
      ${tableDataJson}}
      `
      tableData.push(tableDataJson);
      //操作按钮配置
      let operate = [];
      for (let i = 0; i < this.tableProp.operate.length; i++) {
        let operateJson = null;
        switch (this.tableProp.operate[i].type) {
          case 1: //编辑
            operateJson = `
            { //按钮集合
              name: '${this.tableProp.operate[i].name}',//按钮名称
              type: 'warning',//按钮颜色 primary success info warning danger text
              icon: 'el-icon-edit', //图标
              plain: false,// 是否朴素按钮 false 否 true 是
              round: false, // 是否圆角 false 否 true 是
              method: 'tableEditClick', //按钮方法
              id: "20000",//权限 20000 默认显示
              status: '20000',//状态值
            }`
            break
          case 2: //删除
            operateJson = `
            {
              name: '${this.tableProp.operate[i].name}',//按钮名称
              type: 'danger',//按钮颜色 primary success info warning danger text
              icon: 'el-icon-delete', //图标
              plain: false,// 是否朴素按钮 false 否 true 是
              round: false, // 是否圆角 false 否 true 是
              method: 'tableDelClick', //按钮方法
              id: "20000",//权限 20000 默认显示
              status: '20000',//状态值
            }`
            break
          case 3:
            operateJson = `
            {
              name: '${this.tableProp.operate[i].name}',//按钮名称
              type: 'primary',//按钮颜色 primary success info warning danger text
              icon: 'el-icon-check', //图标
              plain: false,// 是否朴素按钮 false 否 true 是
              round: false, // 是否圆角 false 否 true 是
              method: 'tableClick${i + 1}', //按钮方法
              id: "20000",//权限 20000 默认显示
              status: '20000',//状态值
            }`
            break
        }
        operate.push(operateJson);
      }
      let expand=''
      if(this.tableProp.expand){
        expand=`expand:true,//是否是箭头点击
          //箭头后面的数据导入自定义组件
          expandArray:{
            componentName:'${this.tableProp.componentName}',//组件名称
            ref:'',//ref名称
          },`
      }
      this.textarea += `
        //CommonTable组件数据
        tableProp: {
          ${expand}
          loading: false,//加载中 true  加载完成false
          class: '',//表格顶部div class
          index: true,//是否需要有序号
          selection: false,//是否是多选框
          selectionVal: 'id',// 开启多选获取的字段
          selectionId: [],// 开启多选后，选择哪几条
          isPage: true, //是否分页
          current_page: 1,//单前第几页
          pageSize: 30,//一页数量
          pageMethod: 'tablePageClick',//分页方法
          pageTotal: 10,//分页总数
          statusName: '${this.tableProp.statusName}',//状态字段名 已启动未启动等状态按钮显示还是隐藏
          //字段配置
          tableListProp: [${tableListProp}],
          //操作按钮配置
          operate: [${operate}],
          //table 数据
          tableData: [${tableData}],
        },
      `
    },
    //生成dialog
    dialogClick() {
      let formListProp = [];
      let formData = `id:'',
      `;//生成dialogData
      for (let i = 0; i < this.dialogProp.formListProp.length; i++) {
        let formListJson = null;
        switch (this.dialogProp.formListProp[i].type) {
          case 1:
            formListJson = `
              {
                show: true,//是否显示 true 显示，false 不显示
                label: '${this.dialogProp.formListProp[i].title}',//名称
                field: '${this.dialogProp.formListProp[i].field}',//字段名
                itemClass: '',//这行的class
                width: '',// 输入框等长度
                disabled: false,//是否不能输入 true 不可以输入 false 可以输入
                rules: [{required: true, message: '请输入${this.dialogProp.formListProp[i].title}', trigger: 'blur'}],
                changeMethod: '',//方法名
                type: 'input',//数据类型
              }
              `
            formData += `${this.dialogProp.formListProp[i].field}:'${this.dialogProp.formListProp[i].title}',//${this.dialogProp.formListProp[i].title}
            `
            break
          case 2:
            formListJson = `
            {
              show: true,//是否显示 true 显示 false 不显示
              label: '${this.dialogProp.formListProp[i].title}',//名称
              field: '${this.dialogProp.formListProp[i].field}',//字段
              itemClass: '',//这行的class
              width: '',//长度
              rules: [],
              type: 'uploadImg',//数据类型
              accept: '.png,.jpg',//可上传文件格式,用,号隔开 .png,.jpg
              isAll: false,//是否多图上传 true 是 false 否
              urlType: 'pc_url',//使用那种格式的图片 mobile_url:手机图片 pc_url:pc图片 url:原生大小
              size: '2',//最大上传几MB的图片
            }
            `
            formData += `${this.dialogProp.formListProp[i].field}:[],//${this.dialogProp.formListProp[i].title}
            `
            break
          case 3:
            formListJson = `
            {
              show: true,//是否显示 true 显示，false 不显示
              label: '${this.dialogProp.formListProp[i].title}',//名称
              field: '${this.dialogProp.formListProp[i].field}',//字段名
              itemClass: '',//这行的class
              disabled: false,//是否不能输入 true 不可以输入 false 可以输入
              width: '',//长度
              changeMethod: '',//方法名
              rules: [{required: true, message: '请选择${this.dialogProp.formListProp[i].title}', trigger: 'change'}],
              clearable:true,//false关闭  true 开启
              type: 'select',//数据类型
              filterable:false,//是否可输入搜索 false不可以 true可以
              //选择的值
              prop: []
            }
            `
            formData += `${this.dialogProp.formListProp[i].field}:'${this.dialogProp.formListProp[i].title}',//${this.dialogProp.formListProp[i].title}
            `
            break
          case 4:
            formListJson = `
            {
            show: true,//是否显示 true 显示，false 不显示
            label: '${this.dialogProp.formListProp[i].title}',//名称
            field: '${this.dialogProp.formListProp[i].field}',//字段名
            itemClass: '',//这行的class
            disabled: false,//是否不能输入 true 不可以输入 false 可以输入
            width: '440',//长度
            changeMethod: '',//方法名
            rules: [{required: true, message: '请选择${this.dialogProp.formListProp[i].title}', trigger: 'change'}],
            type: 'radio',//数据类型
            //选择的值
            prop: []
          }
            `
            formData += `${this.dialogProp.formListProp[i].field}:'${this.dialogProp.formListProp[i].title}',//${this.dialogProp.formListProp[i].title}
            `
            break
          case 5:
            formListJson = `
            {
            show: true,//是否显示 true 显示，false 不显示
            label: '${this.dialogProp.formListProp[i].title}',//名称
            field: '${this.dialogProp.formListProp[i].field}',//字段名
            itemClass: '',//这行的class
            disabled: false,//是否不能输入 true 不可以输入 false 可以输入
            width: '440',//长度
            changeMethod: '',//方法名
            rules: [{ type: 'array',required: true, message: '请选择${this.dialogProp.formListProp[i].title}', trigger: 'change'}],
            type: 'checkbox',//数据类型
             //选择的值
            prop: []
          }
            `
            formData += `${this.dialogProp.formListProp[i].field}:'${this.dialogProp.formListProp[i].title}',//${this.dialogProp.formListProp[i].title}
            `
            break
          case 6:
            formListJson = `
            {
            show: true,//是否显示 true 显示，false 不显示
            label: '${this.dialogProp.formListProp[i].title}',//名称
            field: '${this.dialogProp.formListProp[i].field}',//字段名
            itemClass: '',//这行的class
            disabled: false,//是否不能输入 true 不可以输入 false 可以输入
            width: '440',//长度
            changeMethod: '',//方法名
            rules: [{required: true, message: '请选择${this.dialogProp.formListProp[i].title}', trigger: 'change'}],
            type: 'oneDate',//数据类型
            oneDataType: 'date'//时间格式
          }
            `
            formData += `${this.dialogProp.formListProp[i].field}:'${this.dialogProp.formListProp[i].title}',//${this.dialogProp.formListProp[i].title}
            `
            break
        }
        formListProp.push(formListJson)
      }
      this.textarea += `
      //CommonDialog组件数据
        dialogProp: { //设置组件属性
          isDialog: false,//dialog 默认是否显示 true 是 false 否
          loading: false,//加载圈圈
          dialogTitle: '编辑',//dialog标题co
          dialogTop: '15vh',//dialog 头部距离
          dialogWidth: '600px',//dialog 长度
          formRef: 'ruleForm',//ref名称
          formLabelWidth: "120",//label 长度
          formClass: '',//添加的class 多个用空格隔开
          //表单配置
          formListProp: [${formListProp}],
          //按钮配置
          dialogBut: { //dialog 按钮
            class: '',//class
            operate: [{ //按钮集合 取消和确定方法名不要变，自动生成
              name: '取消',//按钮名称
              type: '',//按钮颜色 primary success info warning danger text
              icon: 'el-icon-close', //图标
              plain: true,// 是否朴素按钮 false 否 true 是
              round: false, // 是否圆角 false 否 true 是
              method: 'dialogCancel', //按钮方法
              id: '20000',//权限 20000 默认显示
            }, { //按钮集合
              name: '确定',//按钮名称
              type: 'primary',//按钮颜色 primary success info warning danger text
              icon: 'el-icon-check', //图标
              plain: false,// 是否朴素按钮 false 否 true 是
              round: false, // 是否圆角 false 否 true 是
              method: 'dialogDetermine', //按钮方法
              id: '20000',//权限 20000 默认显示
            }]
          },
          //修改按钮id不为空 编辑点击确定的时候传过去的值
          formData:{
          ${formData}},
        },
      `
    },
    //结束
    endClick() {
      //初始化数据数据
      let initTableData = `id:item.id,
      `
      if (this.componentType.table) {
        for (let i = 0; i < this.tableProp.tableListProp.length; i++) {
          if (this.tableProp.tableListProp[i].type != 4) {
            initTableData += `${this.tableProp.tableListProp[i].field}:item.${this.tableProp.tableListProp[i].field},//${this.tableProp.tableListProp[i].title}
          `
          }
        }
      } else {
        initTableData = ''
      }
      //获取编辑数据
      let enitData = `this.businessTableData.dialogProp.formData.id=result.id;
      `;
      //dialog 确定数据
      let dialogSubData = `id:this.businessTableData.dialogProp.formData.id,
      `;
      if (this.componentType.dialog) {
        for (let i = 0; i < this.dialogProp.formListProp.length; i++) {
          enitData += `this.businessTableData.dialogProp.formData.${this.dialogProp.formListProp[i].field} = result.${this.dialogProp.formListProp[i].field};//${this.dialogProp.formListProp[i].title}
          `
          dialogSubData += `${this.dialogProp.formListProp[i].field}:this.businessTableData.dialogProp.formData.${this.dialogProp.formListProp[i].field},//${this.dialogProp.formListProp[i].title}
          `
        }
      } else {
        enitData = ''
        dialogSubData = ''
      }

      this.textarea += `
      }
       };
  },
  mounted() {
  //把dialog原始数据存储
    if(this.businessTableData.componentType.dialog){
      this.initDialogData = JSON.parse(JSON.stringify(this.businessTableData.dialogProp.formData));
    }
    //初始化
    this.initData();
  },
  methods: {
      //初始化
    initData() {
    //this.businessTableData.tableProp.loading = true;
    let params={};
    //是否有初始状态
     if (this.businessTableData.tabsProp.tabsSwitchField !== '') {
        params[this.businessTableData.tabsProp.tabsSwitchField] = Number(this.businessTableData.tabsProp.active);
     }else{
      params[this.businessTableData.tabsProp.tabsSwitchField] = '';
     }
      //当前第几页
      params.page = this.businessTableData.tableProp.current_page;
      //调用初始化接口
      if(this.businessTableData.interfaceName.init!==''){
        this['$'+this.businessTableData.interfaceName.init](params).then((result) => {
          this.businessTableData.tableProp.current_page = result.current_page;//单前页
          this.businessTableData.tableProp.pageTotal = result.total;//总数
          this.businessTableData.tableProp.pageSize = result.per_page;//每页多少条
          this.businessTableData.tableProp.loading = false;
          this.businessTableData.tableProp.tableData = result.map(item => ({
            ${initTableData}
          }));
        })
      }
    },
    //CommonTitle组件 添加账号 按钮点击
    addTitleClick(item) {
      this.businessTableData.dialogProp.formData = JSON.parse(JSON.stringify(this.initDialogData));
      this.businessTableData.dialogProp.dialogTitle = item.name;
      this.businessTableData.dialogProp.isDialog = true;
      this.businessTableData.dialogProp.loading = false;
    },
     //CommonTabs组件 点击搜索 点击tabs状态 时候调用的方法
    tabsClick() {
      if(this.businessTableData.tableProp!=undefined){
        this.businessTableData.tableProp.current_page=1;
      }
     this.initData();
    },


    //CommonTable组件
    //编辑按钮
    tableEditClick(row,item){
      this.businessTableData.dialogProp.formData = JSON.parse(JSON.stringify(this.initDialogData));
      this.businessTableData.dialogProp.dialogTitle = item.name;
      let params = {id: row.id};
      this.businessTableData.dialogProp.loading=true;
      this.businessTableData.dialogProp.isDialog = true;
      if(this.businessTableData.interfaceName.oneData!==''){
        this['$'+this.businessTableData.interfaceName.oneData](params).then((result) => {
        console.log(result)
          ${enitData}
          this.businessTableData.dialogProp.loading=false;
        })
      }
    },

      //删除按钮
    tableDelClick(row){
      this.$confirm('此操作将永久删除, 是否继续?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let data = {
          id: row.id
        }
        if(this.businessTableData.interfaceName.del!==''){
          this['$'+this.businessTableData.interfaceName.del](data).then(() => {
            this.$message.success('删除成功');
            this.initData();
          })
        }
      }).catch(() => {
        this.$message.info('已取消删除');
      });
    },

    // 分页按钮
    tablePageClick(page) {
      this.businessTableData.tableProp.current_page = page;
      this.initData();
    },

       //CommonDialog组件
    //取消按钮
    dialogCancel(){
      this.businessTableData.dialogProp.isDialog = false;
    },

    //确定按钮
    dialogDetermine(){
      this.$refs['businessTable'].$refs['businessCommonDialog'].$refs[this.businessTableData.dialogProp.formRef].validate((valid) => {
        if (valid) {
          let data = {
          ${dialogSubData}};
          if (this.businessTableData.dialogProp.formData.id == '') {
            if(this.businessTableData.interfaceName.add!==''){
              this['$'+this.businessTableData.interfaceName.add](data).then(() => {
                this.$message.success('提交成功');
                this.businessTableData.dialogProp.isDialog = false;
                this.initData();
              })
            }
          } else {
            if(this.businessTableData.interfaceName.edit!=='') {
              this['$'+this.businessTableData.interfaceName.edit](data).then(() => {
                this.$message.success('修改成功');
                this.businessTableData.dialogProp.isDialog = false;
                 this.initData();
              })

            }

          }
        } else {
          console.log('验证没过!!');
          return false;
        }
      })
    }

  },
};
${this.endScript}
${this.styel}}
      `
    },
    //清空
    endClick2() {
      this.textarea = '';
    },
    //全自动生成
    allClick() {
      this.yuanshiClick();
      if (this.componentType.title) {
        this.titleClick();
      }
      if (this.componentType.tabs) {
        this.tabClick();
      }
      if (this.componentType.table) {
        this.tableClick();
      }
      if (this.componentType.dialog) {
        this.dialogClick();
      }
      this.endClick();
    },
  },
};
</script>

<style lang="scss" scoped></style>
